
<template>
  <div>
    <el-row>
      <el-col :span="8">
        <category-common
          @handler="handlerMessage"
        >
        </category-common>
      </el-col>
  <el-col :span="16">
    <el-row>
      <el-col :span="8"  style="min-width:150px">
        <el-input  placeholder="搜索名称"></el-input>
      </el-col>
      <el-col :span="1" style="min-width: 80px;margin-left: 10px">
        <el-button @click="findAll">查询</el-button>
      </el-col>
      <el-col :span="1" style="min-width: 80px">
        <el-button @click="currentOperator('save')">新增</el-button>
      </el-col>
    </el-row>


    <el-row style="margin-top: 10px">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{'text-align':'center'}"
        style="width: 100%;">

            <el-table-column
              align="center"
              prop="attr_id"
              label="属性id"
             >
            </el-table-column>

            <el-table-column
              align="center"
              prop="attr_name"
              label="属性名"
             >
            </el-table-column>

            <el-table-column
              align="center"
              prop="search_type"
              label="是否需要检索[0-不需要，1-需要]"
             >
            </el-table-column>

            <el-table-column
              align="center"
              prop="icon"
              label="属性图标"
             >
            </el-table-column>

            <el-table-column
              align="center"
              prop="value_select"
              label="可选值列表[用逗号分隔]"
             >
            </el-table-column>

            <el-table-column
              align="center"
              prop="attr_type"
              label="属性类型[0-销售属性，1-基本属性，2-既是销售属性又是基本属性]"
             >
            </el-table-column>

            <el-table-column
              align="center"
              prop="enable"
              label="启用状态[0 - 禁用，1 - 启用]"
             >
            </el-table-column>

            <el-table-column
              align="center"
              prop="catelog_id"
              label="所属分类"
             >
            </el-table-column>

            <el-table-column
              align="center"
              prop="show_desc"
              label="快速展示【是否展示在介绍上；0-否 1-是】，在sku中仍然可以调整"
             >
            </el-table-column>

        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="rows">
            <el-button  @click="currentOperator('update',rows.row)">修改</el-button>
            <el-button @click="currentOperator('delete',rows.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    </el-col>
    </el-row>

<!--    <el-pagination-->
<!--      align="center"-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="query.page"-->
<!--      :page-sizes="[1, 5, 10, 20]"-->
<!--      :page-size="query.size"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total">-->
<!--    </el-pagination>-->


    <pmsattr-save
    :dialogShow="dialogShow"
    :pmsattrFrom="pmsattrFrom"
    @handler="handlerMessage"
    >
    </pmsattr-save>

  </div>
</template>
<script>

import pmsattrApi from '@/api/product/PmsAttr'
import pmsattrSave from './PmsAttr-save'
import categoryCommon from '../common/category'


export default {
  name: "pmsattr",
  components:{
    pmsattrSave,
    categoryCommon
  },
  data() {
     return {
       dialogShow:false,
       total:0,
       tableData:[],
       pmsattrFrom:{
       },
       query:{
         page:0,
         size:5,
       } ,
     }
  },
  methods:{
    handlerMessage(code,message){
        if (code=="close"){
           this.dialogShow=false
           //清空form的数据
           this.pmsattrFrom={}
        }else if(code=="open"){
          this.dialogShow=true
        }else if(code=="save"){
           this.save(message)
        }else if(code=="update"){
          this.update(message)
        }else if(code=="changeNode"){
          this.findAttrByCatId(message)
        }
    },
    currentOperator(code,obj){
      if (code=="save"){
         this.dialogShow=true
      }else if (code=="update"){
        this.findById(obj.attr_id)
      }else if (code=="delete"){
         //删除单个
         this.delete(obj.attr_id)
      }

    },
    findAttrByCatId(id){
      pmsattrApi.findAttrByCatId({"catelog_id":id}).then(res=>{
        if (res.code==200){
          this.tableData=res.list
        }else {
          this.$message.error(res.message)
        }
      })
    },
    search(){

    },
    findAll(){
      pmsattrApi.findAll(this.query).then(res=>{
        if (res.code==200){
          this.tableData=res.list
          this.total=res.total
        }else {
            this.$message.error(res.message)
        }
      })
    },
    findById(id){
      pmsattrApi.findById({"attr_id":id}).then(res=>{
        if (res.code==200){
          this.pmsattrFrom=res.model
          this.dialogShow=true
        }else {
          this.$message.error(res.message)
        }
      })

    },
    save(obj){
      pmsattrApi.save(obj).then(res=>{
         if (res.code==200){
            this.$message.success(res.message)
            this.findAll()
         }else {
           this.$message.error(res.message)
         }
      })
    },
    update(obj){
      pmsattrApi.update(obj).then(res=>{
        if (res.code==200){
          this.$message.success(res.message)
          this.findAttrByCatId(obj.catelog_id)
        }else {
          this.$message.error(res.message)
        }
      })
    },
    delete(ids){
      this.$confirm('是否删除?', '警告!', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pmsattrApi.delete(ids).then(res=>{
          if (res.code==200){
            this.$message.success(res.message)
            this.findAll()
          }else {
            this.$message.error(res.message)
          }
        })
      }).catch(() => {
          //取消后的逻辑
      });

    },
    handleSizeChange(size){
       this.query.size=size
       this.findAll()
    },
    handleCurrentChange(page){
      this.query.page=page
      this.findAll()
    },

  },
  created() {
    //this.findAll()
  }
}
</script>

<style lang="less" scoped>
</style>

